<template>
  <div class="timerBg" :style="{width:`${w}px`}">
    <div class="hourMinute">{{ hourMinute }}</div>
    <div class="year">{{ week }}&nbsp;&nbsp;&nbsp;{{ year }}</div>
  </div>
</template>
<script>
import dayjs from "dayjs";

require('dayjs/locale/zh-cn')
dayjs.locale('zh-cn')
export default {
  props:['w'],
  data() {
    return {
      hourMinute: dayjs().format('HH:mm'),
      year: dayjs().format('YYYY-MM-DD'),
      week: dayjs().format('dddd'),
      timer: null
    }
  },
  created() {
    this.getTime();
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    getTime() {
      this.timer = setInterval(() => {
        let td = dayjs()
        this.hourMinute = td.format('HH:mm')
        this.year = td.format('YYYY-MM-DD')
        this.week = td.format('dddd')
      })
    }
  },
}
</script>
<style lang="scss">
.timerBg {
  height: 176px;
  left: 20px;
  top: 96px;
  background-size: contain;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.hourMinute, .year {
  width: 100%;
  text-align: center;
}

.hourMinute {
  top: 30px;
  font-size: 48px;
}

.year {
  top: 100px;
}
</style>